<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('叶子单元列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li id="unit3Li" style="display: none">
                            <label>三级单元：</label>
                            <select id="unit3Select" name="unit3Id" onchange="setNextUnitSelect(this.value,3)">
                            </select>
                        </li>
                        <li id="unit4Li" style="display: none">
                            <label>四级单元：</label>
                            <select id="unit4Select" name="unit4Id" onchange="setNextUnitSelect(this.value,4)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li id="unit5Li">
                            <label>包区名称：</label>
                            <select id="unit5Select" name="unit5Id" onchange="setNextUnitSelect(this.value,5)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.addFull()" shiro:hasPermission="workbench:leaf_unit_city:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-info" onclick="$.table.importExcel()"
               shiro:hasPermission="workbench:leaf_unit_city:import">
                <i class="fa fa-upload"></i> 导入
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()"
               shiro:hasPermission="workbench:leaf_unit_city:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    let editFlag = [[${@permission.hasPermi('workbench:leaf_unit_city:edit')}]]
    let removeFlag = [[${@permission.hasPermi('workbench:leaf_unit_city:remove')}]]
    let prefix = ctx + "workbench/leaf_unit_city"

    $(loadSelect)

    /**
     * 加载选择器
     */
    function loadSelect() {
        $.ajax({
            method: 'post',
            url: '/workbench/leaf_unit_city/getMyDept',
            success: function (dept) {
                let level = dept.level;
                if (level !== 2) {
                    setPreviousUnitSelect(dept.parentId, level);
                }
                setCurrentSelect(dept, level);
                setNextUnitSelect(dept.deptId, level);
                //延时加载表格
                setTimeout(loadTable, 200);
            }
        })
    }

    /**
     * 加载表格
     */
    function loadTable() {
        let options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            modalName: "所辖小区",
            columns: [{
                checkbox: true
            },
                {
                    field: 'unit6.id',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'unit3.deptName',
                    title: '三级单元',
                    visible: false
                },
                {
                    field: 'unit4.deptName',
                    title: '四级单元',
                    visible: false
                },
                {
                    field: 'unit5.deptName',
                    title: '包区名称',
                    visible: false
                },
                {
                    field: 'unit6.name',
                    title: '社区/行政村'
                },
                {
                    field: 'unit5.leader',
                    title: '承包人'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        let actions = []
                        actions.push('<a class="btn btn-primary btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="communityList(\'' + row.unit6.id + '\')"><i class="fa fa-edit"></i>社区管理</a> ')
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editFull(\'' + row.unit6.id + '\')"><i class="fa fa-edit"></i>编辑</a> ')
                        // actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.unit6.id + '\')"><i class="fa fa-remove"></i>删除</a>')
                        return actions.join('')
                    }
                }]
        }
        $.table.init(options)
    }

    /**
     * 打开小区详情页
     */
    function communityList(id) {
        let origin = window.location.origin;
        $.modal.openTab('社区详情', origin + '/workbench/leaf_unit_city_7?id=' + id);
    }

    /**
     * 设置上级单元选择器
     * @param parentId 当前选择的项
     * @param currentLevel 单元等级
     */
    function setPreviousUnitSelect(parentId, currentLevel) {
        $.ajax({
            method: 'post',
            url: '/system/dept/selectByDeptId',
            data: {
                deptId: parentId
            },
            success: function (previousUnit) {
                let selectId
                let parentLevel = currentLevel - 1
                switch (parentLevel) {
                    case 5:
                        selectId = "#unit5Select"
                        setPreviousUnitSelect(previousUnit.parentId, parentLevel)
                        break
                    case 4:
                        selectId = "#unit4Select"
                        setPreviousUnitSelect(previousUnit.parentId, parentLevel)
                        break
                    case 3:
                        selectId = "#unit3Select"
                        break
                    case 2:
                        break
                    default:
                        alert("单元等级错误p：" + level)
                }
                let option = "<option value='" + previousUnit.deptId + "'>" + previousUnit.deptName + "</option>"
                $(selectId).html(option).selectpicker('refresh')
            }
        })
    }

    /**
     * 设置当前选择器的值
     */
    function setCurrentSelect(dept, level) {
        let selectId
        switch (level) {
            case 9:
                selectId = "#unit9Select"
                break
            case 8:
                selectId = "#unit8Select"
                break
            case 7:
                selectId = "#unit7Select"
                break
            case 6:
                selectId = "#unit6Select"
                break
            case 5:
                selectId = "#unit5Select"
                break
            case 4:
                selectId = "#unit4Select"
                break
            case 3:
                selectId = "#unit3Select"
                break
            case 2:
                break
            default:
                alert("单元等级错误c：" + level)
        }
        let options = "<option value='" + dept.deptId + "'>" + dept.deptName + "</option>";
        $(selectId).html(options).selectpicker('refresh');
    }

    /**
     * 设置下级单元选择器
     * @param deptId 本单元id
     * @param parentLevel 单元等级
     */
    function setNextUnitSelect(deptId, parentLevel) {
        let currentLevel = parentLevel + 1
        resetCurrentSelectOptions(currentLevel)
        if (deptId === "") {
            return;
        }
        $.ajax({
            method: 'post',
            url: '/system/dept/getChildrenDeptFilterByTypes',
            data: {
                deptId: deptId,
                types: '1,2,3',
            },
            success: function (list) {
                let options = "<option value=\"\">所有</option>"
                for (let i = 0; i < list.length; i++) {
                    let option = list[i]
                    options += "<option value='" + option.deptId + "'>" + option.deptName + "</option>"
                }
                let liId
                let selectId
                let firstUnit = list[0]
                switch (currentLevel) {
                    case 5:
                        selectId = "#unit5Select"
                        break
                    case 4:
                        selectId = "#unit4Select"
                        liId = "#unit4Li"
                        if (firstUnit !== undefined) {
                            setNextUnitSelect(list[0].deptId, currentLevel)
                        }
                        break
                    case 3:
                        selectId = "#unit3Select"
                        liId = "#unit3Li"
                        if (firstUnit !== undefined) {
                            setNextUnitSelect(list[0].deptId, currentLevel)
                        }
                        break
                    default:
                        alert("单元等级错误n：" + level)
                }
                $(selectId).html(options).selectpicker('refresh')
                if (liId !== '') {
                    $(liId).show()
                }
            }
        })
    }


    /**
     * 设置选择器所有后，重置后续所有选择器未所有
     * @param level 单元等级
     */
    function resetCurrentSelectOptions(level) {
        let options = "<option value=\"\">所有</option>"
        switch (level) {
            case 3:
                $("#unit4Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(4)
                break
            case 4:
                $("#unit5Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(5)
                break
            case 5:
                $("#unit6Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(6)
                break
        }
    }
</script>
</body>
<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <span class="pull-left mt10" style="color: red; ">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </span>
            <div class="mt10 pt5">
                <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs">
                    <i class="fa fa-file-excel-o"></i>下载模板</a>
            </div>
        </div>
    </form>
</script>
</html>
